<template>
    <div class="bg-images-box" style="height: 100px;">
        <div class="flex-r flex-jc-c flex-ai-c">
            <div class="select-box flex-c flex-jc-c">
                <div class="f-24 f-b c-white">
                    <span>{{ tips }}</span>
                </div>
                <div class="flex-r flex-jc-sb flex-ai-c input-box">
                    <div style="width: calc(100% - 70px);">
                        <el-input v-model="value" placeholder="请输入花卉名称" size="large" prefix-icon="Search" maxlength="30"
                            clearable />
                    </div>
                    <div class="w-px-60">
                        <el-button type="success" size="large" icon="Search" style="width: 100%;"
                            @click="searchEvent(value)"></el-button>
                    </div>
                </div>
                <div class="f-16 c-green items-box flex-r flex-jc-c flex-ai-c">
                    <div v-for="(item, index) in items" :key="index" class="item-hover" @click="changeEvent(item)"><span>{{
                        item }}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Carousel',
    data() {
        return {
            value: '',
            items: ['梅花', '百合', '玫瑰',  '牡丹花', '康乃馨']
        }
    },
    methods: {
        searchEvent(data) {
            this.$emit('search', data)
        },
        changeEvent(data) {
            this.value = data;
            this.searchEvent(data)
        }
    }
}
</script>

<style scoped lang="scss">
.bg-images-box{
}

.select-box {
    width: 30%;
    min-width: 460px;

    .f-b span {
        letter-spacing: 4px;
    }

    .input-box {
        margin: 20px 0 10px;
    }

    .items-box {
        letter-spacing: 2px;

        div {
            margin-right: 10px;
        }

        .item-hover:hover {
            cursor: pointer;
            color: var(--el-color-warning)
        }
    }
}
</style>
